<!DOCTYPE html>
<div class="card-pf kie-card-small-height" data-field="comments">
    <div class="card-pf-heading">
        <div class="card-pf-time-frame-filter" data-field="search-actions">
            <button class="btn btn-link kie-btn-link" type="button" data-field="sort-alpha-desc"
                    data-toggle="tooltip" data-placement="left" title="..." >
                <span class="fa fa-sort-numeric-desc"></span>
            </button>
            <button class="btn btn-link kie-btn-link hidden" type="button" data-field="sort-alpha-asc"
                    data-toggle="tooltip"  data-placement="left" title="..." >
                <span class="fa fa-sort-numeric-asc"></span>
            </button>
        </div>
        <h2 class="card-pf-title">
            <span data-i18n-key="Comments"></span>
        </h2>
    </div>
    <div class="card-pf-body ">
        <div class="row">
            <!-- Roles -->

            <div class="col-xs-12">

                <!-- input for comments -->
                <div class="list-group-item kie-list-group-item--header" data-field="list-group-item">
                    <div class="list-view-pf-actions kie-comments__pf-actions" data-field="actions-dropdown">
                        <a href="#" data-field="addCommentButton">
                            <span class="fa fa-plus-circle pull-right kie-comments__add-button"></span>
                        </a>
                    </div>
                    <div class="list-view-pf-main-info kie-comments__main-info">
                        <div class="list-view-pf-left kie-comments__list-view-pf-left">
                            <span class="pficon pficon-user list-view-pf-icon-sm"></span>
                        </div>
                        <div class="list-view-pf-body">
                            <div class="list-view-pf-description kie-comments__list-view-pf-description" data-field="comment-creation-group">
                                <div class="kie-full-width">
                                    <input type="text" class="form-control input-lg" placeholder="Add a comment." data-field="comment-creation-input">
                                    <span data-field="comment-creation-help" class="help-block"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- list of comments -->
                <div class="kie-scrollbox kie-scrollbox--comments" data-field="scrollbox">
                    <div class=" list-group kie-list-view--embedded" data-field="comments-list" ></div>
                    <div class="card-pf-body kie-card-body--embedded" data-field="empty-list-item">
                        <div href="" class="card-pf-link-with-icon"><span class="pficon pficon-info"></span>
                            <span data-i18n-key="NoCommentsFound"></span>
                        </div>
                    </div>
                </div>
                <div id="load-more" data-field="load-div" style="text-align: center; padding-top: 10px;">
                    <button type="button" class="btn btn-primary" data-field="load-more-comments" data-i18n-key="LoadMoreComments"></button>
                </div>
                


            </div>

        </div>
    </div>
</div>